<!-- 2023年4月5日 08点27分 gpd 我的 11-->
<template>
	<view class="My">
		<!-- 我的头部 -->
		<view class="My_head">
			<!-- 我的账号 -->
			<view class="My_AccountNumber" @click="toPersonalInfoPage()">
				<!-- 头像 -->
				<image class="My_avatar" :src="userData.avatarUrl"></image>
					<!-- 账号 -->
				 <view class="My_UserName">
					<p style="font-size: 14px;font-weight: bold;margin-top: 10px;color:slategray">{{userData.nickName}}</p>
					<p style="font-size: 12px;margin-top: 2px;color:slategray">{{userData.mail}}</p>
				 </view>
				 <button @click="toSignIn" style="width: 120px;height: 30px;float: left;margin-top: 15px;margin-left: 12%;" shape="circle" type="warn" size="mini">每日签到</button>
			</view>
			<!-- 关注商品 -->
			<view class="My_attention">
				<view class="My_attention_view" @click="toCommodityCollectionPage()">
					<p style="font-size: 12px;margin-top: 6px;color:slategray">收藏商品</p>
					<p style="color: #947177;font-weight: bold;font-size: 14px;margin-top:3px;">{{commodityCollectionCount}}</p>
				</view>
				<view class="My_attention_view" @click="toDiyCollectionPage()">
					<p style="font-size: 12px;margin-top: 6px;color:slategray">收藏diy</p>
					<p style="color: #947177;font-weight: bold;font-size: 14px;margin-top:3px;">{{diyCollectionCount}}</p>
				</view>
				<view class="My_attention_view" @click="toUserHistoryPage()">
					<p style="font-size: 12px;margin-top: 6px;color:slategray">浏览记录</p>
					<p style="color: #947177;font-weight: bold;font-size: 14px;margin-top:3px;">{{historyCount}}</p>
				</view>
			<!-- 	<view class="My_attention_view">
					<p style="font-size: 12px;margin-top: 6px;color:slategray">收藏品牌</p>
					<p style="color: #947177;font-weight: bold;font-size: 14px;margin-top:3px;">20</p>
				</view>
				<view class="My_attention_view">
					<p style="font-size: 12px;margin-top: 6px;color:slategray">喜欢内容</p>
					<p style="color: #947177;font-weight: bold;font-size: 14px;margin-top:3px;">20</p>
				</view> -->
			</view>
			<!-- vip -->
			<!-- <view class="my_Vip">
				<p style="float: left;margin-top: 26px;margin-left: 10px;color: #DECC7B;font-weight: bold; font-size: 15px;">VIP会员享受更多权益</p>
				<p style="margin-top: 12px;color: #DECC7B; font-size: 12px;float: left;margin-left: 90px;">2020.3.12到期</p>
				<u-button text="立即续费>" color="#E9CC71" style="width: 80px;height: 20px;float: left;margin-left: 90px;margin-top: 10px;" shape="circle"></u-button>
			</view> -->
		</view>
		<!-- 我的订单 -->
		<view class="My_myorder">
			<view class="my_order">
				<p style="font-size: 14px;margin-top: 10px;font-weight: bold;float: left;">我的订单</p>
				<p style="font-size: 14px;float: left;margin-top: 10px;color: #C2C8C8;margin-left: 62%;font-weight: bold;"  @click="checkMyOrder()">查看全部></p>
			</view>
			<view style="margin-top: 20px;">
				<u-tabbar
					style="margin-top: 20px;"
					:value="value4"
					@change="changeTabbar"
					:fixed="false"
					:placeholder="false"
					activeColor="black"
					:safeAreaInsetBottom="false"
				>
					<u-tabbar-item text="待付款"	@click="click1" style="margin-top: 20px;">
						<image
							style="width: 34px;height:34px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=887`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=887`'
						></image>
					</u-tabbar-item >
					<u-tabbar-item text="待发货" @click="click2" style="margin-top: 20px;">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=888`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=888`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="已发货" @click="click3" style="margin-top: 20px;">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=891`'
						></image>
						<image
							style="width: 40px;height:36px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=891`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="待评价" @click="click4" style="margin-top: 20px;">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=889`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=889`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="售后" style="margin-top: 20px;">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=890`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=890`'
						></image>
					</u-tabbar-item>
				</u-tabbar>
			</view>
			
			<image :src='`http://101.43.223.224:8765/image/getImageById?id=840`' style="width: 100%;height: 80px;margin-top: 20px;"></image>
		</view>
		<!-- 我的权益 -->
		<view class="my_interests">
			<view class="my_MyInterests">
				<p style="font-size: 14px;margin-top: 10px;font-weight: bold;float: left;">我的权益</p>
				<p style="font-size: 14px;float: left;margin-top: 10px;color: #C2C8C8;margin-left: 62%;font-weight: bold;">查看全部></p>
			</view>
			<view style="margin-top: 20px;">
				<u-tabbar
					
					:value="value5"
					@change="name => value5 = name"
					:fixed="false"
					:placeholder="false"
					activeColor="blue"
					:safeAreaInsetBottom="false"
				>
					<u-tabbar-item text="每月免邮">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="7天退换">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="积分抽奖">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
					</u-tabbar-item>
					<u-tabbar-item text="免费试用">
						<image
							style="width: 40px;height:40px;"
							slot="active-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
						<image
							style="width: 40px;height:40px;"
							slot="inactive-icon"
							:src='`http://101.43.223.224:8765/image/getImageById?id=831`'
						></image>
					</u-tabbar-item>
				</u-tabbar>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 我的订单获取点击的序号
				value4: 0,
				// 我的权益获取点击的序号
				value5: 0,
				//登录用户
				userData:{
					id:'',
					nickName:'',
					password:'',
					gender:'',
					mail:'',
					phone:'',
					avatarUrl:'',
				},
				//收藏商品数量
				commodityCollectionCount:0,
				//收藏商品数量
				diyCollectionCount:0,
				//历史记录数量
				historyCount:0,
				//diy数量
				diyCollectionCount:0
			}
		},
		methods:{
			// 跳转待付款订单页面
			click1(){
				uni.navigateTo({
					url:"/pages/my/MyOrder?curNow="+1
				})
			},
			// 跳转代发货订单页面
			click2(){
				uni.navigateTo({
					url:"/pages/my/MyOrder?curNow="+2
				})
			},
			// 跳转代收货订单页面
			click3(){
				uni.navigateTo({
					url:"/pages/my/MyOrder?curNow="+3
				})
			},
			// 跳转代评价订单页面
			click4(){
				uni.navigateTo({
					url:"/pages/my/MyOrder?curNow="+9
				})
			},
			//跳转至浏览历史页面
			toUserHistoryPage(){
				uni.navigateTo({
					url:'/pages/my/personal/UserHistoryView'
				})
			},
			//跳转至商品收藏页面
			toCommodityCollectionPage(){
				uni.navigateTo({
					url:'/pages/my/personal/CommodityCollectionView'
				})
			},
			//跳转至diy收藏页面
			toDiyCollectionPage(){
				uni.navigateTo({
					url:'/pages/my/personal/DiyCollectionView'
				})
			},
			//查询商品收藏数量
			getCommodityCollectionCountByUserId(){
				this.$myRequest({
					url: '/user/info/getCommodityCollectionCountByUserId',
					data: {
						userId: this.userData.id
					}
				}).then(res => {
					if(res.data.flag){
						this.commodityCollectionCount = res.data.data
					}else{
						this.commodityCollectionCount = 0
					}
				})
			},
			//查询div收藏数量
			getDiyCollectionCountByUserId(){
				this.$myRequest({
					url: '/user/info/getDiyCollectionCountByUserId',
					data: {
						userId: this.userData.id
					}
				}).then(res => {
					if(res.data.flag){
						this.diyCollectionCount = res.data.data
					}else{
						this.diyCollectionCount = 0
					}
				})
			},
			//查询浏览记录数量
			getHistoryCountByUserId(){
				this.$myRequest({
					url: '/user/info/getUserHistoryCountByUserId',
					data: {
						userId: this.userData.id
					}
				}).then(res => {
					if(res.data.flag){
						this.historyCount = res.data.data
					}else{
						this.diyCollectionCount = 0
					}
				})
			},
			// 前往个人信息页面
			toPersonalInfoPage(){
				uni.navigateTo({
					url:'/pages/my/personal/PersonalInfoView'
				})
			},
			// 点击查看我的订单触发方法
			checkMyOrder(){
				uni.navigateTo({
					url:'/pages/my/MyOrder'
				})
			},
			// 点击签到跳转签到积分页面
			toSignIn(){
				uni.navigateTo({
					url:"/pages/index/SignIn"
				})
			}
		},
		onLoad(){
			this.userData = wx.getStorageSync('user')
			this.getCommodityCollectionCountByUserId()
			this.getDiyCollectionCountByUserId()
			this.getHistoryCountByUserId()
		},
	}
</script>

<style>
	.My{
		width: 100%;
		height: 845px;
		background-color: #FAF9F7;
	}
	.My_head{
		width:100%;
		height: 120px;
		background-color: white;
	}
	.My_AccountNumber{
		width:100%;
		height: 60px;
	}
	.My_avatar{
		width:100rpx;
		height:100rpx;
		border-radius: 50%;
		margin-top: 5px;
		margin-left: 10px;
		float: left;
	}
	.My_UserName{
		width:120px;
		height: 60px;
		float: left;
		margin-left: 12px;
	}
	.My_attention{
		width:100%;
		height: 50px;
	}
	.My_attention_view{
		width: 110px;
		height: 50px;
		float: left;
		margin-left: 4%;
		text-align: center;
	}
	.my_Vip{
		width:95%;
		height: 70px;
		background-color: #0B062F;
		border-radius: 8% 8% 0% 0%;
		margin-left: 10px;
		margin-top: 10px;
		overflow: hidden;
	}
	.My_myorder{
		width:100%;
		height: 220px;
		background-color: white;
		overflow: hidden;
		margin-top: 20px;
	}
	.my_order{
		margin-left: 20px;
		width:92%;
		height: 40px;
		border-bottom: 1px solid #C2C8C8;
		overflow: hidden;
	}
	.my_interests{
		width:100%;
		height: 160px;
		background-color: white;
		overflow: hidden;
		margin-top: 20px;
	}
	.my_MyInterests{
		margin-left: 20px;
		width:92%;
		height: 40px;
		border-bottom: 1px solid #C2C8C8;
		overflow: hidden;
	}
</style>